<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 父组件给子组件传参 是通过自定义属性的方式 直接加在子组件的标签上 -->
         <!-- prop写在标签上时，注意是短横线的形式 -->
        <component-a v-bind:t="title" :list="list" :totalnum="totalNum"></component-a>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        // 首先父(vm实例)里面存放了一个变量title,然后它v-bind:t="title"给了这个title变量
        // 这个t是我自定义的属性，然后他就可以直接加在外地子组件的标签上
        // 一个子组件 接受父组件的传递来的数据，通过props（property） 
        var ComponentA = {
            name: "ComponentA", // 方便开发工具来显示组件名称，把名称和组件的注册名一致
            props: ["t","list","totalNum"],//不要直接改这个里面的数据，// 写成驼峰式的命名法
            template: `<div>{{msg}}<br>
                            {{t}}
                            <ul>
                                <li v-for="item in list">{{item}}</li>
                            </ul>

                            {{totalNum}}
                        </div>`,
            data(){
                return{
                    msg: "组件A"
                }
            },
            created(){
                // props中父组件传过来的数据，子组件直接通过 this["属性名"]来使用
                console.log(this["t"]);
                console.log(this.t);
                 // 还可以在子组件中 通过$props  来获取父组件传过来的所有的props值
                console.log(this.$props)

            }
        }
        var vm = new Vue({
            el: "#app",
            data: {
                title: "今天吃什么",
                list: ["泡面","麻辣烫","鸡公煲"],
                totalNum:10

            },
            components: {
                ComponentA
            }
        })
    </script>
</body>
</html>